<template>
  <div class="app-container">
    <el-row :gutter="20" style="padding-bottom: 15px">
      <el-col :span="8">
        <el-card class="box-card" style="overflow:hidden;">
          <div slot="header" class="clearfix">
            <el-input placeholder="请输入订单编号" v-model="params.workOrderCode" clearable>
              <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
            </el-input>
          </div>
          <div style="height: 570px; overflow:auto;" class="cont" @scroll="scrollEvent">
            <el-card class="box-card"  shadow="hover" v-for="item in orderList" style="margin-bottom: 10px;">
              <a  @click="orderClick(item)">
                <div class="el-descriptions__header">
                  <div class="el-descriptions__title">{{item.workOrderCode}}</div>
                  <div class="el-descriptions__extra">
                    <el-tag size="mini" :type="getStatusColour(item)" >{{ dict.label.work_order_status[item.orderStatus] }}</el-tag>
                  </div>
                </div>
                <el-row>
                  <el-col :span="16">
                    <div class="item_container">
                      <span class="item_label">生产产品:</span>
                      <span class="item_content">{{item.productCode}}</span>
                    </div>
                    <div class="item_container">
                      <span class="item_label">生产工段:</span>
                      <span class="item_content">{{item.sectionCode}}</span>
                    </div>
                    <div class="item_container">
                      <span class="item_label">计划开始:</span>
                      <span class="item_content">{{item.planStart}}</span>
                    </div>
                    <div class="item_container">
                      <span class="item_label">计划结束:</span>
                      <span class="item_content">{{item.planEnd}}</span>
                    </div>
                  </el-col>
                  <el-col :span="8" style="text-align: center;padding-top: 20px">
                    <el-progress type="circle" :percentage="getSchedule(item)" :width="70"></el-progress>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-button type="text" class="button">需求数量：{{item.requiredQty}}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="text" class="button">完成数量：{{item.finishQty}}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="text" class="button">剩余数量：{{item.requiredQty - item.finishQty}}</el-button>
                  </el-col>
                </el-row>
              </a>
            </el-card>
            <div style="width: 100%;text-align: center;">
              <p v-if="loading">加载中...</p>
              <p v-if="noMore">没有更多了</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-card class="box-card"  style="margin-bottom: 20px;">
              <div slot="header" class="clearfix" style="height: 30px">
                <span >工单详情</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-descriptions  :column="2"  >
                    <el-descriptions-item label-class-name="my_descriptions-item" label="工单编号">{{orderObject.workOrderCode}}</el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="生产产品">{{orderObject.productCode}}</el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="工单状态"><el-tag size="small" :type="getStatusColour(orderObject)">{{ dict.label.work_order_status[orderObject.orderStatus] }}</el-tag></el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="产品类型"><el-tag type="warning">{{getProductTypeName(orderObject.productType)}}</el-tag></el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="计划员">{{orderObject.planner}}</el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="客户名称">{{orderObject.clientName}}</el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="生产产线">{{orderObject.lineCode}}</el-descriptions-item>
                    <el-descriptions-item label-class-name="my_descriptions-item" label="加工工段">{{orderObject.sectionCode}}</el-descriptions-item>
                    <el-descriptions-item label="计划开始">{{orderObject.planStart}}</el-descriptions-item>
                    <el-descriptions-item label="计划结束">{{orderObject.planEnd}} </el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="10">
                  <table style="width: 100%">
                    <tr class="my_tr">
                      <td class="my_td border_r border_b">
                        <div class="table_leble">
                          计划数量
                        </div>
                        <div class="table_content">
                          {{orderObject.requiredQty}}/{{orderObject.finishQty}}
                        </div>
                      </td>
                      <td class="my_td border_r border_b">
                        <div class="table_leble">
                          合格数量
                        </div>
                        <div class="table_content" style="color: #13ce66">
                          {{orderObject.finishQty}}
                        </div>
                      </td>
                      <td class="my_td border_b">
                        <div class="table_leble">
                          不合格数量
                        </div>
                        <div class="table_content" style="color: #ff4949">
                          {{orderObject.failQty}}
                        </div>
                      </td>
                    </tr>
                    <tr class="my_tr">
                      <td class="my_td border_r">
                        <div class="table_leble">
                          剩余数量
                        </div>
                        <div class="table_content" style="color: #FFBA00">
                          {{orderObject.requiredQty - orderObject.finishQty < 0 ? 0 : orderObject.requiredQty - orderObject.finishQty}}
                        </div>
                      </td>
                      <td class="my_td border_r">
                        <div class="table_leble">
                          在线数量
                        </div>
                        <div class="table_content" style="color: #00a0e9">
                          {{orderObject.totalQty - (orderObject.finishQty + orderObject.failQty)}}
                        </div>
                      </td>
                      <td class="my_td">
                        <div class="table_leble">
                          合格率
                        </div>
                        <div class="table_content">
                          {{calculatePassRate(orderObject)}}
                          <span style="font-size: 14px">%</span>
                        </div>
                      </td>
                    </tr>
                  </table>
                </el-col>
              </el-row>

            </el-card>
          </el-col>

          <el-col :span="12">
            <el-card class="box-card" style="margin-bottom: 10px;">
              <PassRatePieChart :dataArray="passRatePieChartData"></PassRatePieChart>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" style="margin-bottom: 10px;">
              <FailPieChart :failData="failPieChartData"></FailPieChart>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>

<script>

import { initData } from '@/api/data'

import FailPieChart from '@/components/Echarts/FailPieChart'
import crudProductType from '@/api/product/productType'

import PassRatePieChart from '@/components/Echarts/PassRatePieChart'

const defaultForm = { id: null, lineCode: null, sectionCode: null, equipmentcode: null, timestamp: null, ordersorts: null, workOrderCode: null, productCode: null, requiredQty: null, planStart: null, planEnd: null, modulemethod: null, polarcode: null, grade: null, ud1: null, ud2: null, dscribes: null, orderStatus: null, totalqty: null, finishQty: null, failQty: null, createby: null, createtime: null, updateby: null, updatetime: null }

export default {
  name: 'PlanWorkOrderMonitor',//订单监控
  dicts: ['work_order_status'],
  components:{FailPieChart , PassRatePieChart},
  data () {
    return {
      input: '',
      loading: false,
      initNum: 4,
      params: {
        page: 0,
        size: 4,
        total: 0,
        sort: 'id,desc',
        workOrderCode: ''
      },
      orderList: [],
      orderObject: {},
      productTypes: [],
      failPieChartData: [
        { value: 0, name: '不合格' }
      ],
      passRatePieChartData: [
        { value: 0, name: '合格' },
        { value: 0, name: '不合格' },
        { value: 0, name: '在线' }
      ],
    }
  },
  computed: {
    noMore () {
      return this.orderList.length >= this.params.total
    }
  },
  methods: {
    scrollEvent (e) {
      if((e.currentTarget.scrollTop + e.currentTarget.clientHeight + 1)>= e.currentTarget.scrollHeight && !this.noMore){
        this.loading = true
        this.params.size += this.initNum;
        this.getOrders(this.params);
      }
    },
    getOrders(params){
      // 请求数据
      initData('api/planWorkOrder/monitor', params).then(data => {
        this.params.total = data.totalElements
        this.orderList = data.content
        if(data.content && data.content.length > 0 && JSON.stringify(this.orderObject) =="{}"){
          this.orderClick(data.content[0]);
        }
        // time 毫秒后显示表格
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    //点击查询
    searchClick(){
      this.getOrders(this.params);
    },
    getStatusColour(item){
      if(item.orderStatus == '0'){
        return 'info';
      }else if(item.orderStatus == '1'){
        return 'warning';
      }else if(item.orderStatus == '2'){
        return '';
      }else if(item.orderStatus == '3'){
        return 'success';
      }
    },
    getSchedule(item){
      let progress = 0;
      if(item.requiredQty != 0 && item.finishQty != 0){
        progress = Math.ceil(item.finishQty / item.requiredQty * 100);
      }
      return progress;
    },
    //点击工单
    orderClick(item){
      this.orderObject = item;
      //更新合格率饼状图
      this.setPassRatePieChart(item);

      //更新不合格饼状图
      this.setFailPieChart(item);
    },
    //计算合格率
    calculatePassRate(item){
      const count = item.finishQty + item.failQty;
      if(item.finishQty == 0){
        return 0;
      }
      return Math.floor( (item.finishQty / count * 100) * 100) / 100;
    },
    //设置合格饼状图
    setPassRatePieChart(item){
      const arr = [];
      const line = item.totalqty - (item.finishQty + item.failQty);
      arr.push({ value: item.finishQty, name: '合格' })
      arr.push({ value: item.failQty, name: '不合格' })
      arr.push({ value: line < 0 ? 0 : line, name: '在线' })
      this.passRatePieChartData = arr;
    },
    //设置不合格统计图
    setFailPieChart(item){
      // 请求数据
      initData('api/planWorkOrder/failInfo', item).then(data => {
        if(!data || data.length == 0){
          this.failPieChartData = [{ value: 0, name: '不合格' }];
        }else{
          this.failPieChartData = data;
        }
      })
    },
    getProductTypeName(type){
      let name = '';
      this.productTypes.forEach(res =>{
        if(res.productType == type){
          name = res.productTypeName;
          return
        }
      })
      return name;
    }
  },
  mounted() {
    //获取数据
    this.getOrders(this.params);
    crudProductType.list().then(res =>{
      this.productTypes = res;
    })
  }
}
</script>

<style scoped>
.el-descriptions_title {
  font-size: 16px;
  font-weight: 700;
}

.item_container {
  padding-bottom: 8px;
}

.item_label {
  box-sizing: inherit;
  margin-right: 5px;
  font-size: 12px;
  color: #606266;
}

.item_content {
  box-sizing: inherit;
  margin-right: 10px;
  font-size: 12px;
  color: #606266;
}

.button {
  padding: 0;
}

.my_tr {
  width: 100% ;
  height: 100px;
}

.my_td {
  width: 33%;
}

.border_r {
  border-right:#cccccc solid 1px;
}

.border_b {
  border-bottom: #cccccc solid 1px;
}

.table_leble {
  text-align: center;
  font-size: 12px;
  color: #606266;
  padding-bottom: 10px;
}

.table_content {
  text-align: center;
  font-size: 26px;
  color: #000000;
  font-weight:400
}
</style>

<style type="text/css">
.my_descriptions-item {
  padding-bottom: 16px;
}
.cont::-webkit-scrollbar {
  display: none;
}
</style>
